<template>
  <div ref="pie" style="height: 100%"></div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        backgroundColor: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#0c0d2b",
            },
            {
              offset: 0.5,
              color: "#0a0c3d",
            },
            {
              offset: 1,
              color: "#111629",
            },
          ],
        },
        title: {
          text: "转化率",
          subtext: "转化的百分率或分率",
          link: "https://gallery.echartsjs.com/explore.html?u=bd-1841183165&type=work",
          target: "blank",
          x: "center",
          top: "10",
          textStyle: {
            color: "#FFF",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },
        legend: {
          data: ["A", "B", "C", "D", "E"],
          x: "center",
          y: "92%",
          textStyle: {
            color: "#FFF",
          },
        },
        color: [
          "#c2c1bd",
          "#00a1e5",
          "#23c768",
          "#e5ce10",
          "#ff7e00",
          "#fe0000",
        ],
        series: [
          {
            name: "TIT",
            type: "funnel",
            left: "center",
            width: "90%",
            sort: "ascending",
            label: {
              normal: {
                formatter: "{b}",
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
              },
            },
            itemStyle: {
              normal: {
                opacity: 0.3,
              },
            },
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 10,
                name: "A",
              },
              {
                value: 20,
                name: "B",
              },
              {
                value: 40,
                name: "C",
              },
              {
                value: 60,
                name: "D",
              },
              {
                value: 80,
                name: "E",
              },
              {
                value: 100,
                name: "F",
              },
            ],
          },
          {
            name: "TIT",
            type: "funnel",
            left: "center",
            width: "80%",
            maxSize: "80%",
            sort: "ascending",
            label: {
              normal: {
                position: "inside",
                formatter: "{c}%",
                textStyle: {
                  color: "#fff",
                  fontSize: 14,
                },
              },
              emphasis: {
                position: "inside",
                formatter: "{b}: {c}%",
              },
            },
            itemStyle: {
              normal: {
                opacity: 0.8,
                borderColor: "rgba(12, 13, 43, .9)",
                borderWidth: 3,
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowOffsetY: 5,
                shadowColor: "rgba(0, 0, 0, .6)",
              },
            },
            data: [
              {
                value: 2,
                name: "A",
              },
              {
                value: 5,
                name: "B",
              },
              {
                value: 12,
                name: "C",
              },
              {
                value: 18,
                name: "D",
              },
              {
                value: 25,
                name: "E",
              },
              {
                value: 40,
                name: "F",
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    let charts = this.$echarts.init(this.$refs.pie);
    charts.setOption(this.option);
  },
};
</script>
